{% extends 'common_tpl.html' %}
{% load static %}
{% block title %}用户注册{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account_info.css' %}">
    <style>
        .error-msg {
            color: red;
            position: absolute;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="account_info">
            <h1 class="title">注册</h1>
            <form id="reg-form">
                {#                会自动在表单中创建name为csrfmiddlewaretoken的隐藏输入框用于校验csrftoken#}
                {% csrf_token %}
                {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {% if field.name == 'code' %}
                            <div class="clearfix">
                                <div class="col-md-6" style="padding-left: 0">{{ field }}<span class="error-msg"></span>
                                </div>

                                <div class="col-md-6" style="padding-right: 0"><input id="code" class="btn btn-primary"
                                                                                      type="button" value="点击获取验证码">
                                </div>
                            </div>
                        {% else %}
                            {{ field }}
                            <span class="error-msg"></span>
                        {% endif %}

                    </div>
                {% endfor %}
                <button id="register-btn" type="button" class="btn btn-primary">注 册</button>
                <span id="non_field_errors" class="error-msg col-md-11"></span>
            </form>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        {#表示在页面框架加载完成就能生效，一般jquery代码写在这里#}
        $(function () {
            {#函数的调用#}
            bindClickCodeBtn();
            bindClickRegisterBtn()
        });

        {#绑定函数的定义#}

        function bindClickCodeBtn() {
            $("#code").click(function () {
                $('.error-msg').empty();
                {#获取用户输入的手机号,let 局部变量#}
                let mobilePhone = $("#id_mobile").val();
                $.ajax({
                    {#通过url 名称反向解析#}
                    url: "{% url 'main:api_code' %}",
                    type: "post",
                    data: {
                        mobile: mobilePhone
                    },
                    dataType: "JSON", //将服务端的响应返回为一个字典
                    {#res是后端的响应返回值#}
                    success: function (res) {
                        console.log(res.ret)
                        if (res.ret === 0) {
                            codeWaitTimer();
                        } else { //循环此字典每次循环执行函数
                            $.each(res.errors, function (name, data) {
                                $('#id_' + name).next().text(data[0])
                            })
                        }
                        ;

                    }
                })
            })
        }

        function codeWaitTimer() {
            $('#code').prop('disabled', true);//添加属性
            let time = 5; // 计数变量
            let timer = setInterval(function () {
                $('#code').val(time + '秒后可重新发送');
                time -= 1;
                if (time < 1) {
                    clearInterval(timer) // 清空计时器对象
                    $('#code').val('点击获取验证码').prop('disabled', false);
                }

            }, 1000) //设置一个定时器，没1000毫秒执行一次
        }

        function bindClickRegisterBtn() {
            $('#register-btn').click(function () {
                $('.error-msg').empty();
                {#收集已经输入的表单数据#}
                let form_data = $("#reg-form").serialize() // 会自动携带csrftoken，并手机表单中的所有input框数据
                console.log(form_data)
                $.ajax({
                    url: "{% url 'main:api_register' %}",
                    type: "post",
                    data: form_data,
                    dataType: "JSON",
                    success: function (res) {
                        if (res.ret === 0) {
                            location.href = "{% url 'main:login' %}";
                        } else { //循环此字典每次循环执行函数
                            $.each(res.errors, function (name, data) {
                                $('#id_' + name).next().text(data[0])
                                console.log(name)
                                if (name === 'non_field_errors') {
                                    $('#non_field_errors').text(data[0])
                                }
                            })
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}